import { createApp, reactive, nextTick } from 'vue'
import VeLoading from './loading.jsx'
import { addClass, removeClass } from 'amtf/utils'
import { clsName } from './util'
import { SPIN_NAMES, COMPS_NAME } from '../src/util/constant'

// default options
const defaultOptions = {
  name: 'plane',
  visible: false,
  color: '#1890ff',
  overlayBackgroundColor: 'rgba(255, 255, 255, 0.5)',
  width: 40,
  height: 40,
  tip: '',
  fullscreen: false,
  target: '',
  lock: false,
  // parent “__parent__”会被忽略
  parent__: null,
}

// parent relative class
const PARENT_RELATIVE_CLASS = clsName('parent-relative')
// parent lock class
const PARENT_LOCK_CLASS = clsName('parent-lock')

// 定义一个组件选项对象，假设VeLoading组件本身是一个函数式组件或者已经正确定义的组件选项
const LoadingComponentOptions = {
  // 如果有需要可以在这里定义props、emits等内容，这里简单假设没有特殊的props等定义
  setup(props, { attrs, slots, emit }) {
    const state = reactive({
      // 这里使用解构赋值和默认值来设置初始状态
      name: props.name ?? defaultOptions.name,
      visible: props.visible ?? defaultOptions.visible,
      color: props.color ?? defaultOptions.color,
      overlayBackgroundColor:
        props.overlayBackgroundColor ?? defaultOptions.overlayBackgroundColor,
      width: props.width ?? defaultOptions.width,
      height: props.height ?? defaultOptions.height,
      tip: props.tip ?? defaultOptions.tip,
      fullscreen: props.fullscreen ?? defaultOptions.fullscreen,
      target: props.target ?? defaultOptions.target,
      lock: props.lock ?? defaultOptions.lock,
      parent__: props.parent__ ?? defaultOptions.parent__,
    })

    // show方法
    const show = () => {
      nextTick(() => {
        if (state.lock) {
          addClass(state.parent__, PARENT_LOCK_CLASS)
        }
        state.visible = true
      })
    }

    // close方法
    const close = () => {
      nextTick(() => {
        if (state.lock) {
          removeClass(state.parent__, PARENT_LOCK_CLASS)
        }
        state.visible = false
      })
    }

    // destroy方法
    const destroy = () => {
      removeClass(state.parent__, PARENT_RELATIVE_CLASS)
      removeClass(state.parent__, PARENT_LOCK_CLASS)
      if (state.$el && state.$el.parentNode) {
        state.$el.parentNode.removeChild(state.$el)
      }
      state.visible = false
    }

    // 如果有需要可以在这里进行其他逻辑处理或者定义计算属性等

    return {
      show,
      close,
      destroy,
      state,
    }
  },
}

// check spin name
const checkSpinName = (name) => {
  if (!Object.values(SPIN_NAMES).includes(name)) {
    console.error(`${name} is not found in ${COMPS_NAME.VE_LOADING}.`)
  }
}

// Loading instance
const Loading = (options = {}) => {
  options = { ...defaultOptions, ...options }

  if (typeof options.target === 'string' && options.target.length > 0) {
    options.target = document.querySelector(options.target)
  }
  options.target = options.target || document.body

  checkSpinName(options.name)

  if (options.target !== document.body) {
    options.fullscreen = false
  } else {
    options.fullscreen = true
  }

  const app = createApp(LoadingComponentOptions)
  const instance = app.mount(document.createElement('div'))

  // set parent
  options.parent__ = options.fullscreen ? document.body : options.target

  addClass(options.parent__, PARENT_RELATIVE_CLASS)

  options.parent__.appendChild(instance.$el)

  return instance
}

export default Loading
